<template>
  <div class="navBar-container">
    <div class="navBar-box" :style="{ backgroundColor: bgc }">
      <!-- 左边logo区域 -->
      <div class="logo">
        <img src="@/assets/logo.png" class="logo_pic" alt="Image" />
        <p>化简</p>
      </div>
      <!-- 中间下拉菜单 -->
      <div class="navBar_center">
        <div class="navBar_item">
          <el-dropdown>
            <span class="el-dropdown-link">
              简历制作
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>在线制作</el-dropdown-item>
                <el-dropdown-item>积木制作</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div class="navBar_item">
          <el-dropdown>
            <span class="el-dropdown-link">
              获取源码
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>简历模板</el-dropdown-item>
                <el-dropdown-item>PPT模板</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div class="navBar_item">
          <el-dropdown>
            <span class="el-dropdown-link">
              在线工具
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="gotoCompression">图片压缩</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div class="navBar_item">
            <span class="el-dropdown-link strategy" @click="goToStrategy" >
              简历攻略
            </span>
        </div>
      </div>
      <!-- 右边 -->
      <div class="navBar_right">
        <div class="navBar_icon1">
          <div class="navBar_code">
            <SvgIcon name="code" width="20px" hight="20px"></SvgIcon>
          </div>
          <span>官方交流</span>

          <img class="bgc-img" src="@/assets/images/vx-qun.jpg" alt="" />
        </div>
        <div class="navBar_icon1">
          <div class="navBar_code">
            <SvgIcon name="connect" width="20px" hight="20px"></SvgIcon>
          </div>
          <span>联系我</span>
          <!-- 二维码 -->
          <img class="bgc-img" src="@/assets/images/vx-qun.jpg" alt="" />
        </div>
        <div class="navBar_icon1 avatar">
          <div class="navBar_code">
            <SvgIcon name="avatar" width="40px" hight="40px"></SvgIcon>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ArrowDown } from '@element-plus/icons-vue'
import SvgIcon from '@/components/SvgIcon/index.vue'
import { useRouter } from 'vue-router'
const router = useRouter()
defineProps({
  bgc: {
    type: String,
    default: '#ffffff',
  },
})
// onMounted(() => {
//   console.log(props.bgc)
// })
function goToStrategy() {
  //简历攻略页面
   router.push({ name: 'create' })
  //  router.push({ name: 'login' })
}
function gotoCompression() {
   router.push({ name: 'compression' })
}
</script>
<style lang="scss" scoped>
@mixin size($w, $h) {
  width: $w;
  height: $h;
}
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: '阿里妈妈刀隶体 Regular';
  font-weight: 400;
  src:
    url('//at.alicdn.com/wf/webfont/YL9FqzHidzZX/ee07wVjg2BW0.woff2')
      format('woff2'),
    url('//at.alicdn.com/wf/webfont/YL9FqzHidzZX/0Zcw2sY4AY3c.woff')
      format('woff');
  font-display: swap;
}
/* element-plus下拉菜单样式 */
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

.fixedNavbar {
  position: fixed;
  width: 100%;
  z-index: 2032;
  top: 0;
  left: 0;
  padding-bottom: 10px;
}

.navBar-box {
  @include size(100%, 60px);
  display: flex;
  // background-color: #1c3260;
  position: fixed;
  width: 100%;
  z-index: 2032;
  top: 0;
  left: 0;

  .logo {
    display: flex;
    flex: 2;
    justify-content: space-evenly;
    align-items: center;
    .logo_pic {
      @include size(70px, 70px);
    }
    p {
      position: relative;
      top: 0;
      left: 0;
      margin-left: -5px;
      font-family: '阿里妈妈刀隶体 Regular';
      font-size: 30px;
    }
  }
  .navBar_center {
    display: flex;
    flex: 5;
    .navBar_item {
      box-sizing: border-box;
      height: 60px;
      line-height: 60px;
      margin: 0 20px;
      .el-dropdown-link {
        margin: 20px 0;
        font-size: 18px;
      }
      .el-dropdown-link:focus {
        outline: none;
      }
    }
  }
  .navBar_right {
    display: flex;
    flex: 3;
    .navBar_icon1 {
      @include size(100px, 60px);
      display: flex;
      position: relative;
      justify-content: space-around;
      align-items: center;
      margin: 0 5px;
      span {
        color: #606266;
      }
      img {
        @include size(176px, 245px);
        position: absolute;
        left: -25px;
        top: 60px;
        display: none;
      }
    }
    .navBar_icon1:hover img {
      display: block;
    }
    .avatar {
      border: 1px solid red;
      border-radius: 50%;
      @include size(50px, 50px);
    }
  }
}
.strategy {
  color: #606266;
}
</style>
